<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>抱团</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui,viewport-fit=cover" />
    <meta name="keywords" content="抱团">
    <meta name="description" content="抱团">
    <script type="text/javascript" src="js/base.js" charset="UTF-8"></script>
    <!-- <link rel="stylesheet" type="text/css" href="css/theme-chalk/index.css"> -->
    <!-- <link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css"> -->
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type='text/javascript' src="js/jquery.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="js/html2canvas.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/layer/layer.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/axios.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/elementui.min.js" charset="UTF-8"></script> -->
    <!-- <script type='text/javascript' src="js/swiper-bundle.min.js" charset="UTF-8"></script> -->
    <script type='text/javascript' src="js/qrcode.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/helper.js" charset="UTF-8"></script>
</head>
<body>
    <div class="page mysy" id="app" v-if="loaded==true">

            <!-- 用户信息 -->
            <div class="user">
                <img class="img" :src="user_info.avatar_url" alt="">
                <div class="name">{{user_info.nickname}} 的金库</div>
            </div>
            <!-- 收益信息 -->
            <div class="syBox">
                <div class="top">
                    <div class="text">我的总收益 : <span>{{shouyidata.total}}</span></div>
                    <a href="./myTx.html" class="myjk">
                        <div class="icon"></div>
                        <div>立即提现</div>
                    </a>
                </div>
                <div class="bottom">
                    <div class="item">
                        <div class="t">未提现</div>
                        <div class="b">{{shouyidata.un_settled}}</div>
                    </div>
                    <div class="item">
                        <div class="t">已提现</div>
                        <div class="b">{{shouyidata.settled}}</div>
                    </div>
                    <div class="item">
                        <div class="t">直卖收益</div>
                        <div class="b">{{shouyidata.sale_profit}}</div>
                    </div>
                    <div class="item">
                        <div class="t">团队收益</div>
                        <div class="b">{{shouyidata.team_profit}}</div>
                    </div>
                </div>
            </div>
            <!-- 收益详情 -->
            <div class="sylist">
                <div class="til">我的团队</div>
                <div class="userlist_" v-if="teamdata.list.length==0">
                    <div class="img" style="background-image:url('images/tx.png')"></div>
                    <div class="info">
                        <div>还没有团队人员</div>
                        <div>分享<span @click="openShareBox">我的二维码</span>让朋友加入吧</div>
                    </div>
                </div>
                <div class="teamList" v-if="teamdata.list.length>0">
                    <div class="item" v-for="(item,index) in teamdata.list" :key="index">
                        <div class="l">
                            <img :src="item.avatar_url" alt="" class="img">
                            <div class="des">{{item.nickname}}</div>
                        </div>
                        <div class="r">贡献值：<span>¥{{item.team_contribution}}</span></div>
                    </div>
                </div>

            </div>

    <!-- 分享码弹窗 -->
    <div class="shareBox">
        <div class="main">
            <div class="close" @click="closeShareBox"></div>
            <div class="hb">
                <img src="" alt="" id="shareimg">
            </div>
            <div class="tip">长按保存海报</div>
        </div>
    </div>
    <div class="shareBoxpop">
        <img class="bg" src="images/share.png" alt="">
        <div class="con">
            <div class="user">
                <div class="tx"><img :src="user_info.avatar_url" alt=""></div>
                <p class="name">{{user_info.nickname}}</p>
            </div>
            <div class="des">
                <div class="destxt">
                    <p>我是{{darendata.level_name}} <span>{{user_info.nickname}}</span>，</p>
                    <p>扫码加入我的抱团大家庭吧</p>
                </div>
            </div>
            <div class="erm">
                <div id="qrcodeOne" class="qrcode"></div>
            </div>
        </div>
    </div>
    </div>

</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                user_info:{},
                loaded:false,
                shouyidata:'',
                teamdata:'',
            }
        },
        mounted() {
            
            var that=this;
            var user_info=JSON.parse(getCookie("user_info"));
            if(!user_info){
                that.isLogin=false;
            }else{
                that.isLogin=true;
                that.user_info=user_info;
            }
            console.log(that.user_info)
            that.getdata();
        },
        methods: {
            getdata:function(){
                var that=this;
                that.page=1;
                var ready1 = false, ready2 = false, ready3 = false;
                var load = setInterval(() => {
                  if (ready1 == true && ready2 == true && ready3 == true) {
                    that.loaded = true;
                    clearInterval(load);
                    that.$nextTick(function () {
                      that.makecodeOne();
                    })
                  }
                }, 100)
                //查询达人概况
                talent_get('profile').then(res => {
                  console.log(res);
                  that.darendata = res;
                  ready1 = true;
                })
                //查询收益概况
                talent_get('profits/total_summary').then(res => {
                  console.log(res);
                  that.shouyidata = res;
                  ready2 = true;
                })
                //我的团队
                talent_get('my_team').then(res => {
                  console.log(res);
                  that.teamdata = res;
                  ready3 = true;
                })
            },
            openShareBox: function () {
                var that = this;
                if ($('#shareimg').attr('src') == '') {
                  var canvas2 = document.createElement("canvas");
                  var _canvas = $('.shareBoxpop').get(0);
                  var w = parseInt(window.getComputedStyle(_canvas).width);
                  var h = parseInt(window.getComputedStyle(_canvas).height);
                  canvas2.width = w;
                  canvas2.height = h;
                  canvas2.style.width = w + "px";
                  canvas2.style.height = h + "px";
                  var context = canvas2.getContext("2d");
                  var index = layer.load(1, {shade: [0.6, '#000']});
                  html2canvas(_canvas, {
                    scrollY: 0,
                    scrollX: 0,
                    useCORS: true,
                    canvas: canvas2,
                    backgroundColor: null,
                    scale: 3
                  }).then(function (canvas) {
                    layer.close(index);
                    $('#shareimg').attr('src', canvas.toDataURL('image/png'));
                    setTimeout(() => {
                        $('.shareBox').fadeIn(500);
                    },100)
                  });
                } else {
                  $('.shareBox').fadeIn(500);
                }
            },
            makecodeOne: function () {
                var that = this;
                var qrcodetxt = 'https://prod.baotuan.vip/talent_reg?pid=' + that.user_info.talent_id;
                qrcode = new QRCode($('#qrcodeOne').get(0), {
                  text: qrcodetxt,
                  width: 160,
                  height: 160,
                  colorDark: "#000000",
                  colorLight: "#ffffff",
                  correctLevel: QRCode.CorrectLevel.H
                });
            },
            closeShareBox: function () {
                var that = this;
                $('.shareBox').fadeOut(500);
            },
        }
    });
</script>

</html>